<template>
    <el-card class="page-container">
      <template #header>
        <div class="header">
          <span>接口文档生成</span>
        </div>
      </template>
      <div class="content">
        <el-button type="primary" @click="requestDocument" :loading="loading">生成并下载文档</el-button>
        <el-progress v-if="loading" :percentage="progress" />
        <a v-if="fileName" :href="`http://localhost:8080/document/download?fileName=${fileName}`" download>点击这里下载文档</a>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { generateDocumentService } from '@/api/cd/document.js'; // 假设你有一个生成文档的服务
  import { useProjectStore } from '@/stores/projectStore';
  
  // 获取项目存储
  const projectStore = useProjectStore();
  
  // 文件名
  const fileName = ref('');
  const loading = ref(false);
  const progress = ref(0);
  
  // 模拟进度更新
  const updateProgress = () => {
    if (progress.value < 90) {
      progress.value += 10;
      setTimeout(updateProgress, 100);
    } else if (progress.value < 95) {
      progress.value += 5;
      setTimeout(updateProgress, 100);
    } else if (progress.value < 99) {
      progress.value += 1;
      setTimeout(updateProgress, 200);
    }
  };
  
  // 请求生成文档并获取文件名
  const requestDocument = async () => {
    loading.value = true;
    progress.value = 0;
    updateProgress();
  
    try {
      const response = await generateDocumentService(projectStore.selectedProject.id); // 调用后端接口生成文档
      fileName.value = response.data; // 假设后端返回的文件名在 response.data
      ElMessage.success('文档生成成功，请点击下载链接下载文档');
    } catch (error) {
      ElMessage.error('文档生成失败，请稍后重试');
    } finally {
      loading.value = false;
      progress.value = 100;
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    min-height: 300px; /* 调整高度 */
    box-sizing: border-box;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
      width: 100%;
      text-align: center;
    }
  
    .content {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
  
      .el-button {
        margin-bottom: 10px;
      }
  
      a {
        margin-top: 10px;
        color: #409eff;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  </style>